<!DOCTYPE html>
<html lang="en">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

    <link rel="stylesheet" href="/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="/css/bootstrap-theme.min.css"/>
    <link rel="stylesheet" href="/css/community.css"/>
    <link rel="stylesheet" href="/css/editormd.min.css"/>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/community.js"></script>
    <script src="/js/moment.js"></script>
    <script src="/js/editormd.min.js"></script>
    <script src="/js/lib/marked.min.js"></script>
    <script src="/js/lib/prettify.min.js"></script>
    <title>问题详情</title>
</head>
<body>

<div th:insert="~{header :: header-nav}"></div>

<div class="container-fluid main profile">
    <div class="row">
        <!--问题相关-->
        <div class="col-lg-9 col-md-12 col-md-12 col-md-12">
            <div class="col-lg-12 col-md-12 col-md-12 col-md-12">
                <h4><span th:text="${question.title}"></span></h4>
                <hr>
                作者:<span th:text="${question.user.name}"></span>|
                发布时间:<span th:text="${#dates.format(question.gmtCreate,'yyyy-MM-dd HH:mm')}"></span>|
                阅读数:<span th:text="${question.viewCount}"></span>
                <hr class="col-lg-12 col-md-12 col-md-12 col-md-12 ">
                <a class="community-menu" th:href="@{'/publish/'+${question.id}}">
                    <span class="glyphicon glyphicon-pencil " aria-hidden="true"></span>编辑</a>
                <!--描述-->
                <div class="col-lg-12 col-md-12 col-md-12 col-md-12 "  id="markdown-show">
                    <textarea  style="display: none" th:text="${question.description}"></textarea>
                </div>
                <script type="text/javascript">
                    $(function() {
                        editormd.markdownToHTML("markdown-show", {
                        });
                    });
                </script>
            </div>

            <!-- 标签-->
            <hr class="col-lg-12 col-md-12 col-md-12 col-md-12 ">
            <span class="glyphicon glyphicon-tag label label-info question-tag" aria-hidden="true" th:each="tag:${question.tag.split(',')}">
                <span th:text="${tag}"></span>
            </span>
            <hr class="col-lg-12 col-md-12 col-md-12 col-md-12 ">


            <!--评论列表-->
            <h3>
                <span class="text-desc"><span th:text="${question.commentCount}"></span> 个回复</span>
            </h3>
            <div class="col-lg-12 col-md-12 col-md-12 col-md-12 comment-list" th:each="comment:${comments}">
                <!--头像-->
                <div class="media">
                    <div class="media-left">
                        <a href="#">
                            <img class="media-object icon-index img-rounded" src="" th:src="${comment.user.avatarUrl}">
                        </a>
                    </div>
                    <div class="media-body media-font">
                        <h5 class="media-heading">
                            <span th:text="${comment.user.name}"></span>
                        </h5>
                    </div>
                    <div th:text="${comment.content}"></div>
                </div>

                <div class="menu">
                    <span class="glyphicon glyphicon-hand-up" aria-hidden="true"></span>

                    <span th:data-id="${comment.id}"
                          onclick="collapseComments(this)" class="comment-icon">
                    <span class="glyphicon glyphicon-comment" aria-hidden="true"></span>
                    </span>
                    <span th:text="${comment.commentCount}"></span>
                    <span class="pull-right" th:text="${#dates.format(comment.gmtCreate,'yyyy-MM-dd HH:mm')}"></span>
                </div>

                <!-- 二级评论-->
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 collapse "
                     th:id="${'comment-'+comment.id}">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <input type="text" class="form-control" placeholder="评论一下……"
                               th:id="${'input-'+comment.id}">
                        <button type="button" class="btn btn-success pull-right" onclick="comment(this)"
                                th:data-id="${comment.id}">评论
                        </button>
                    </div>
                </div>

            </div>

            <!--评论相关-->
            <h4>
                提交回复
            </h4>
            <hr class="col-lg-12 col-md-12 col-md-12 col-md-12 ">
            <div class="col-lg-12 col-md-12 col-md-12 col-md-12" id="commentSection">
                <div class="media">
                    <div class="media-left">
                        <a href="#">
                            <img class="media-object icon-index img-rounded" src="" th:src="${question.user.avatarUrl}">
                        </a>
                    </div>
                    <div class="media-body media-font">
                        <h4 class="media-heading">
                            <span th:text="${question.user.name}"></span>
                        </h4>
                    </div>
                </div>
                <div class="col-lg-12 col-md-12 col-md-12 col-md-12 div_textarea">
                    <input type="hidden" id="questionId" th:value="${question.id}">
                    <textarea class="form-control" rows="3" id="textArea"></textarea>
                </div>
                <button type="button" class="btn btn-success btn-submit" onclick="commentPost()">提交</button>
            </div>
        </div>

        <!--右侧-->
        <div class="col-lg-3 col-md-12 col-md-12 col-md-12 ">
            <div class="col-lg-12 col-md-12 col-md-12 col-md-12 ">
                <h5>问题发起人</h5>
                <div class="media">
                    <div class="media-left">
                        <a href="#">
                            <img class="media-object icon-index" src="" th:src="${question.user.avatarUrl}">
                        </a>
                    </div>
                    <div class="media-body ">
                        <h4 class="media-heading">
                            <span th:text="${question.user.name}"></span>
                        </h4>
                    </div>
                </div>
                <hr class="col-lg-12 col-md-12 col-md-12 col-md-12 ">
                <div class="col-lg-12 col-md-12 col-md-12 col-md-12 ">
                <h4 class="question-h4">相关问题</h4>
                    <ul class="question-ul">
                        <li th:each="relate : ${relatedQuestions}">
                            <a th:href="@{'/question/'+${relate.id}}"  th:text="${relate.title}" ></a>
                        </li>
                    </ul>
            </div>
            </div>
        </div>
    </div>
</div>
<div class="footer">
    <div th:insert="~{footer :: foot}"></div>
</div>
</body>
</html>